<template>
	<div class="home">
		<el-button type="primary" class="btn" round  @click="show = true">流程图测试</el-button>
		<el-button type="primary" class="btn" round  @click="$router.push('demo')">jsplumb测试</el-button>
		<processDialog :show="show" @cancel="show = false"></processDialog>
	</div>
</template>

<script>
	import processDialog from './components/processDialog.vue';
	export default {
		name: 'HomeView',
		data(){
			return {
				show: true
			}
		},
		components:{
			processDialog
		},
		created(){
			let arr = [{
				id: 1,
				list:[{
					id: 2,
					children:[{
						id: 3,
						list:[{
							id: 4,
							children:[{
								id: 5
							}]
						}]
					}]
				}]
			}]
			// console.log(arr,'///');
			let result = this.recursive(5,arr);
			console.log(result);
			let arrs = [
				{
					title: '节点1',
					list:[
						{
							title: '条件节点1',
							children:[
								{
									title: '节点1'
								}
							]
						},
						{
							title: '条件节点2'
						},
					]
				}
			]
			// console.log(arrs);
			// this.setId(arrs);
			// setTimeout(()=>{
			// 	console.log(arrs,'...');
			// },1000)
		},
		methods:{
			setId(arr){
				arr.map((item, index)=>{
					setTimeout(()=>{
						item.setId = new Date().valueOf() + index.toString();
						if(item.hasOwnProperty('list')){
							item.list.map((iteml,indexl)=>{
								setTimeout(()=>{
									iteml.setId = new Date().valueOf() + indexl.toString();
									if(iteml.hasOwnProperty('children')){
										setTimeout(()=>{
											this.setId(iteml.children);
										},10)
									}
								},10)
							})
						}
					},10)
				});
			},
			recursive(id,arr){
				let ids = -1;
				for( let i = 0; i< arr.length; i++ ){
					if(arr[i].id === id){
						return ids = arr[i].id;
					}
					if(arr[i].hasOwnProperty('list')){
						for (let j = 0; j < arr[i].list.length; j++){
							if(arr[i].list[j].id === id){
								return ids = arr[i].list[j].id;
							}
							if(arr[i].list[j].hasOwnProperty('children')){
								return this.recursive(id, arr[i].list[j].children);
							}
						}
					}
				}
				return ids
			}
		}
	}
</script>

<style lang="less" scoped>
	.home{
		height: 100vh;
		padding-top: 300px;
		.btn{
			margin: 0 30px;
		}
	}
</style>
